<template>
  <div v-if="item.id" class="product-block" @click="$router.push(`/prodetail/${item.id}`)">
       <img class="product-block-img"  :src="item.img" alt="">
       <h3>{{item.name}}</h3>
       <p>{{item.productId}}</p>
       <span>{{item.description}}</span>
       </div>
</template>

<script setup>
const props = defineProps({
  item:{
    type:Object,
    default:()=>{
      return{}
    }
  }
})
</script>

<style>
/*商品块 */
.product-block{
  background-color: rgb(246, 238, 238);
  width: 131px;
  height: 210px;
  margin-left: 37.5px;
  margin-top: 20px;
  border-radius: 20px;
  float: left;
}
.product-block h3{
  font-weight: 600;
  margin-top: 0px;
  margin-left:8px;
  font-size: 16px;
  height: 12px;
}
.product-block p{
  font-weight: 200;
  margin-top: 0px;
  margin-left:8px;
  font-size: 14px;
  height: 10px;
}
.product-block span{
  font-weight: 200;
  margin-left:8px;
  font-size: 14px;
  height: 12px;
}
.product-block-img{
  height: 120px;
  width:118px;
  border-radius: 10px;
  margin-left: -8px;
  margin-top: -8px;
}


</style>